<template>
  <div class="px-50px">
    <h1 class="text-green-7">自动化部署</h1>
    <h1 class="text-red">商品列表首页</h1>
    <div class="flex items-center">
      <span> 商品名称: </span>
      <el-input
        style="width: 200px; margin-left: 10px"
        v-model="goodsName"
        placeholder="请输入内容"
        clearable
      />
    </div>
    <div class="flex items-center justify-end">
      <el-button
        type="primary"
        @click="getTableData"
      >
        查询
      </el-button>
      <el-button @click="onClick"> 添加 </el-button>
    </div>
    <el-table
      class="mt-20px"
      :data="tableData"
      style="width: 100%"
      height="400px"
      :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
    >
      <el-table-column
        v-for="item in columns"
        :key="item.key"
        :prop="item.prop"
        :label="item.title"
        :width="item.width"
        :formatter="item.formatter"
      />
      <el-table-column
        fixed="right"
        label="操作"
        min-width="120"
      >
        <template #default>
          <el-button
            link
            type="primary"
            size="small"
            @click="handleClick"
          >
            编辑
          </el-button>
          <el-button
            link
            type="danger"
            size="small"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="flex justify-end mt-20px"
      background
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @current-change="onPageChange"
      @size-change="onSizeChange"
    />
  </div>
</template>
<script setup>
import { onMounted, ref } from 'vue';
import dayjs from 'dayjs';
import { addGoods, getGoodsList } from '../../api/index.js';
import { ElMessage } from 'element-plus';

const handleClick = () => {
  console.log('click');
};

const goodsName = ref('');

const columns = [
  {
    title: '商品名称',
    prop: 'name',
    key: 'name',
  },
  {
    title: '价格',
    prop: 'price',
    key: 'price',
  },
  {
    title: '库存',
    prop: 'stock',
    key: 'stock',
  },
  {
    title: '描述',
    prop: 'description',
    key: 'description',
  },
  {
    title: '添加时间',
    prop: 'created_at',
    key: 'created_at',
    width: 200,
    formatter: (row, column, cellValue) => {
      return dayjs(cellValue).format('YYYY-MM-DD HH:mm:ss');
    },
  },
];

const pageNo = ref(1);
const pageSize = ref(10);

const total = ref(0);

const tableData = ref([]);

async function getTableData() {
  const res = await getGoodsList({
    pageNo: pageNo.value,
    pageSize: pageSize.value,
  });
  console.log(res);

  tableData.value = res.data.map((item) => {
    return {
      ...item,
      // created_at: dayjs(item.created_at).format('YYYY-MM-DD HH:mm:ss'),
    };
  });
  total.value = res.total;
}

async function onClick() {
  await addGoods({
    name: `商品_${Math.random().toString().slice(2, 8)}`,
    price: 10 * Math.random().toFixed(2) * 100,
    stock: parseInt(200 * Math.random()),
    description: '描述1',
  });
  ElMessage.success('添加成功');
  getTableData();
}

function onSizeChange(size) {
  console.log('size', size);
  pageSize.value = size;
  getTableData();
}

function onPageChange(page) {
  console.log('page', page);
  pageNo.value = page;
  getTableData();
}

onMounted(() => {
  getTableData();
});
</script>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>
